import React, { } from 'react'
import { Layout, Menu, ConfigProvider } from 'antd';
import {
    FileAddOutlined,
    FileDoneOutlined,
    UserOutlined,
    TeamOutlined,
    HomeOutlined,
    BellOutlined,
    UnorderedListOutlined,
    PlusCircleOutlined,
    UsbOutlined,
    SolutionOutlined
} from '@ant-design/icons';
import { useSelector } from 'react-redux'
import { useNavigate } from 'react-router-dom';
import { MenuTitleBox } from './indexCss'




const { Sider } = Layout;
const items = [
    {
        key: '/home',
        icon: <HomeOutlined />,
        label: '首页',
    },
    {
        key: '/absent',
        label: '考勤管理',
        icon: <FileDoneOutlined />,
        children: [
            {
                key: '/absent/my',
                label: '个人考勤',
                icon: <UserOutlined />,
            },
            {
                key: '/absent/sub',
                label: '下属考勤',
                icon: <TeamOutlined />,
            }
        ],
    },
    {
        key: '/inform',
        label: '通知管理',
        icon: <BellOutlined />,
        children: [
            {
                key: '/inform/publish',
                label: '发布通知',
                icon: <PlusCircleOutlined />

            },
            {
                key: '/inform/list',
                label: '通知列表',
                icon: <UnorderedListOutlined />
            }
        ],
    },
    {
        key: '/staff',
        label: '员工管理',
        icon: <UsbOutlined />,
        children: [
            {
                key: '/staff/add',
                label: '新增员工',
                icon: <FileAddOutlined />
            },
            {
                key: '/staff/list',
                label: '员工列表',
                icon: <SolutionOutlined />
            }
        ],
    },
];

export default function SiderPage() {
    const isCollapse = useSelector((state) => state.main.isCollapse)
    const navigate = useNavigate()
    return (
        <Sider trigger={null} collapsible collapsed={isCollapse} style={{ backgroundColor: '#343a40' }}>
            <MenuTitleBox>
                {isCollapse ? <span>知了</span> : <span>知了OA系统</span>}
            </MenuTitleBox>
            <ConfigProvider
                theme={{
                    components: {
                        Menu: {
                            /* 这里是你的组件 token */
                            darkItemBg: '#343a40',
                            darkSubMenuItemBg: '#343a40'
                        },
                    },
                }}
            >
                <Menu
                    theme="dark"
                    mode="inline"
                    defaultSelectedKeys={['1']}
                    items={items}
                    onClick={(item) => {
                        navigate(item.key)
                    }}
                />
            </ConfigProvider>
        </Sider>
    )
}
